<script setup>
import {onMounted, ref} from 'vue';
import { useRouter } from 'vue-router';
import axios from "axios";

const router = useRouter();
const handleLogin=(s)=>{
    const change = document.querySelector('.change')

    console.log(change.textContent)
    // 验证用户输入
    if (!id.value || !password.value) {
       router.push({
            path: '/register',
            query: {
                s: s
            }
        });
    } else {
      if (s === 'seek') {
         const phoneNumber = select.value + id.value;
        // 调用 API 发送登录请求
        axios.post('http://localhost:8082/seeker/login', {
          seekerid: phoneNumber,
          seekerpassword: password.value
        }, {
          headers: {
            'Content-Type': 'application/json',
          },
        }).then(response => {
          if (response.data.success) {
            const formData = new FormData();
            formData.append('id', phoneNumber);
            axios.post('http://localhost:8082/COSandAI/selectByID', formData, {
              headers: {
                'Content-Type': 'multipart/form-data',
              },
            }).then(response=>{
              if (response.data.success) {
                console.log(111);
                console.log(response.data.data);
                localStorage.setItem('dataFromPreviousPage', JSON.stringify(response.data.data));
                localStorage.setItem('seekerId', select.value + id.value);
                router.push('/resume');
              }
            })
          } else {
            alert('登录失败，请检查手机号和验证码');
          }
        }).catch(error => {
          console.error('登录时出错:', error);
          alert('登录出错，请稍后重试');
        });
      }
      if(s==='recruit'){
        axios.post('http://localhost:8082/enterprise/login', {
          enterpriseid: id.value,
          enterprisepassword: password.value
        }, {
          headers: {
            'Content-Type': 'application/json',
          },
        }).then(response => {
          if (response.data.success) {
            console.log(response.data.data);
            localStorage.setItem('dataFromPreviousPage', JSON.stringify(response.data.data));
            localStorage.setItem('userId', id.value);
            router.push('/recruit');
          } else {
            alert('登录失败，请检查企业账号和验证码');
          }
        }).catch(error => {
          console.error('登录时出错:', error);
          alert('登录出错，请稍后重试');
        });
      }
    }
  }


const popoverVisible = ref(false);
const select = ref('+86');
const id = ref('');
const password = ref('');
// 创建一个响应式引用来存储 label 元素
const labelIWantToHire = ref(null);
const manImagePath = '../../public/man.png';
const womanImagePath = '../../public/woman.png';
// 定义一个方法来交换 card1 和 card2 的 z-index
const swapCards = () => {
  const card1 = document.querySelector('.card1');
  const card2 = document.querySelector('.card2');
  const people =document.querySelector('.people');
  const change =document.querySelector('.change')
  // 交换 z-index
  if (card1.style.zIndex === '1') {
    card1.style.marginLeft = '0';
    card1.style.zIndex = '2';
    card2.style.marginLeft = '150px';
    card2.style.zIndex = '1';
    people.src = manImagePath;
    people.style.width = '200px'
    people.style.top = '-40px'
    people.style.left = '20px'
    change.textContent ='我要招聘'
  //   <img  src="../../public/woman.png" class="people" style="position: absolute; top: 70px; left: 80px; transform: translateY(50%);
  // z-index: 99;width: 120px">

} else {
    card1.style.marginLeft = '150px';
    card1.style.zIndex = '1';
    card2.style.marginLeft = '0';
    card2.style.zIndex = '2';
    people.src = womanImagePath;
    people.style.width = '130px'
    people.style.top = '20px'
    people.style.left = '80px'
    change.textContent ='我要应聘'
  }
};

  // 在组件挂载后添加事件监听器
  onMounted(() => {
  labelIWantToHire.value.addEventListener('click', swapCards);
});




</script>

<template>
  <body style="background-image: url('../../public/login_background.png');background-size: cover;">
  <div class="card1">
    <el-row style="height: 100%">
      <el-col :span="10" style="border-right: 1px solid #444444;height: 100%;text-align: center">
        <el-row type="flex" justify="center" align="middle" style="margin-top: 62px">
          <el-image src="../../public/logo.png" style="width: 50px;height: 50px"></el-image>
          <h1>智招</h1>
        </el-row>
        <el-row type="flex" justify="start" align="middle" style="margin-left: 120px">
          <el-image src="../../public/robot.png" style="width: 25px;height: 25px;margin-right: 5px"></el-image>
          <p style="color: #3F72AF;font-size: 24px">AI 能力测评</p>
        </el-row>
        <el-row type="flex" justify="start" align="middle" style="margin-left: 120px">
          <el-image src="../../public/robot.png" style="width: 25px;height: 25px;margin-right: 5px"></el-image>
          <p style="color: #3F72AF;font-size: 24px">一键生成简历</p>
        </el-row>
        <el-row type="flex" justify="start" align="middle" style="margin-left: 120px">
          <el-image src="../../public/robot.png" style="width: 25px;height: 25px;margin-right: 5px"></el-image>
          <p style="color: #3F72AF;font-size: 24px">智能匹配岗位</p>
        </el-row>
      </el-col>
      <el-col :span="14" style="height: 100%;text-align: center" >
        <el-row>
          <el-image
              @click="popoverVisible = false"
              style="cursor: pointer;"
              @mouseenter="popoverVisible = true"
              @mouseleave="popoverVisible = false"
              src="../../public/qrcode.png">
          </el-image>
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <h1 style="color: #4F4F4F">求职人员登录/注册</h1>
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <el-form>
            <el-row>
            <el-input
                v-model="id"
                style="max-width: 300px;margin-top: 30px;"
                placeholder="手机号"
                class="input-with-select1"
                size="large"
            >
              <template #prepend>
                <el-select v-model="select" placeholder="" size="large" style="width: 115px;">
                  <el-option label="+86" value="1" />
                  <el-option label="+852" value="2" />
                  <el-option label="+853" value="3" />
                  <el-option label="+886" value="4" />
                </el-select>
              </template>
            </el-input>
            </el-row>
            <el-input
                v-model="password"
                style="max-width: 300px;margin-top: 30px;"
                placeholder="验证码"
                class="input-with-select2"
                size="large"
            >
              <template #append>
                <el-button  size="large" style="width: 115px;">发送验证码</el-button>
              </template>
            </el-input>
            <el-row type="flex" justify="center" align="middle">
              <el-button-group style="margin-top: 30px" >
                <el-button class="submit" size="large" @click="handleLogin('seek')">登录/注册</el-button>
                <el-button class="wechat" size="large">微信登录</el-button>
              </el-button-group>
            </el-row>
          </el-form>
        </el-row>
      </el-col>
    </el-row>

  </div>
  <div class="card2">
    <el-row style="height: 100%">
      <el-col :span="10" style="border-right: 1px solid #444444;height: 100%;text-align: center">
        <el-row type="flex" justify="center" align="middle" style="margin-top: 62px">
          <el-image src="../../public/logo.png" style="width: 50px;height: 50px"></el-image>
          <h1>智招</h1>
        </el-row>
        <el-row type="flex" justify="start" align="middle" style="margin-left: 120px">
          <el-image src="../../public/robot.png" style="width: 25px;height: 25px;margin-right: 5px"></el-image>
          <p style="color: #3F72AF;font-size: 24px">AI 分析人才</p>
        </el-row>
        <el-row type="flex" justify="start" align="middle" style="margin-left: 120px">
          <el-image src="../../public/robot.png" style="width: 25px;height: 25px;margin-right: 5px"></el-image>
          <p style="color: #3F72AF;font-size: 24px">一键搜索人才库</p>
        </el-row>
        <el-row type="flex" justify="start" align="middle" style="margin-left: 120px">
          <el-image src="../../public/robot.png" style="width: 25px;height: 25px;margin-right: 5px"></el-image>
          <p style="color: #3F72AF;font-size: 24px">智能匹配候选人</p>
        </el-row>
      </el-col>
      <el-col :span="14" style="height: 100%;text-align: center" >
        <el-row>
          <el-image
              @click="popoverVisible = false"
              style="cursor: pointer;"
              @mouseenter="popoverVisible = true"
              @mouseleave="popoverVisible = false"
              src="../../public/qrcode.png">
          </el-image>
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <h1 style="color: #4F4F4F">企业登录/注册</h1>
        </el-row>
        <el-row type="flex" justify="center" align="middle">
          <el-form>
            <el-row>
              <el-input
                  v-model="id"
                  style="max-width: 300px;margin-top: 30px; border-radius: 10px 10px 10px 10px;"
                  placeholder="企业账号"
                  class="input-with-select3"
                  size="large"
              >
              </el-input>
            </el-row>
            <el-input
                v-model="password"
                style="max-width: 300px;margin-top: 30px;width: 100%; "
                placeholder="企业密码"
                class="input-with-select4"
                size="large"
            >
            </el-input>
            <el-row type="flex" justify="center" align="middle">
              <el-button-group style="margin-top: 30px" >
                <el-button class="submit" size="large" @click="handleLogin('recruit')">登录/注册</el-button>
                <el-button class="wechat" size="large">微信登录</el-button>
              </el-button-group>
            </el-row>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
  </div>
  <label ref="labelIWantToHire" class="change" style="writing-mode: vertical-lr;color: #4F4F4F;font-weight: bold;font-size:24px;
  z-index: 99;position: absolute; top: 53%; right: 320px; transform: translateY(50%);">
    我要招聘</label>
  <img  src="../../public/man.png" class="people" style="position: absolute; top: -40px; left: 20px; transform: translateY(50%);
  z-index: 99;width: 200px">
  <label
      v-show="popoverVisible"
      style="position: absolute; top: 19%; left: 828px;z-index: 99;
      background-color: #f9f7f7;padding: 5px;border-radius: 5px;border: #4F4F4F 1px solid"
  >使用app扫码登录
  </label>
  </body>


</template>

<style scoped>
@import "../assets/css/global.css";

.input-with-select1:deep(.el-input__wrapper) {
  background-color: transparent;/*覆盖原背景颜色，设置成透明 */
  border-radius: 0 10px 10px 0;
  border: 0;
}
.input-with-select2:deep(.el-input__wrapper) {
  background-color: transparent;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 0 0 10px;
  border: 0;
}
.input-with-select3:deep(.el-input__wrapper) {
  background-color: transparent;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 10px 10px 10px;
  outline: #3F72AF 1px solid;
}
.input-with-select3:deep(.el-input-group__prepend) {
  background-color: transparent;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 0  0 10px;
  outline: #3F72AF 1px solid;
}
.input-with-select4:deep(.el-input__wrapper) {
  background-color: transparent;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 10px 10px 10px;
  outline: #3F72AF 1px solid;
}
.input-with-select4:deep(.el-input-group__append) {
  background-color: transparent;/*覆盖原背景颜色，设置成透明 */
  border-radius: 0 10px 10px 0;
  outline: #3F72AF 1px solid;
}
:deep(.el-input-group__prepend) {
  background-color: transparent;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 0  0 10px;
  border: 0;
}
:deep(.el-select__wrapper) {
  background-color: transparent;/*覆盖原背景颜色，设置成透明 */
  border-radius: 10px 0  0 10px;
  border: 0;
}
:deep(.el-input-group__append) {
  background-color: transparent;/*覆盖原背景颜色，设置成透明 */
  border-radius: 0 10px 10px 0;
  border: 0;
}
:deep(.el-input-group__append):hover{
  background-color: #3F72AF;
  color: #f9f7f7;
  outline: #3F72AF 1px solid;
  border-radius: 0 10px 10px 0;
}
.submit{
  padding-left: 20px;
  background-color: #3F72AF;
  color: #f9f7f7;
  border: #3F72AF 1px solid;
  border-radius: 10px;
  font-size: 16px;
}
.wechat{
  padding-right: 20px;
  background-color: transparent;
  color: #07C160;
  border: #07C160 1px solid;
  border-radius:  10px ;
  font-size: 16px;
}
</style>